<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择竞赛</title>
    <link rel="stylesheet" href="../css/race.css">
</head>

<body>

    <!-- 导航栏 -->
    <div class="navbar">
        <div class="left">
            <a href="/">首页</a>
            <a href="/all_questions.html">编程题库</a>
        </div>
        <div class="center">
            <a href="/html/job_seek.html">求职</a>
            <a href="/html/learning.html">学习</a>
            <a href="/html/discuss.html">讨论</a>
            <a href="/html/question_bank.html">知识题库</a>
            <a href="/html/ai_qa.html">AI问答</a>
        </div>
        <div class="right">
            <a href="/html/register.html">注册</a>
            <a href="/html/login.html">登录</a>
            <a href="/html/userInfo.html" class="toRight">个人信息</a>
        </div>
    </div>
    <div class="container">
        <!-- 竞赛选择区 -->
        <div class="header">
            <h1>选择竞赛</h1>
            <p>选择一个竞赛类型，提升你的技能，迎接挑战！</p>
        </div>

        <div class="competitions">
            <div class="competition-item" onclick="selectCompetition('algorithm')">
                <h2>算法竞赛</h2>
                <p>参加算法比赛，挑战你的编程技能。</p>
            </div>
            <div class="competition-item" onclick="selectCompetition('webdev')">
                <h2>Web开发竞赛</h2>
                <p>展示你的Web开发技能，构建创新的网页应用。</p>
            </div>
            <div class="competition-item" onclick="selectCompetition('mobiledev')">
                <h2>移动应用开发竞赛</h2>
                <p>开发创新的移动应用程序，面向手机平台。</p>
            </div>
            <div class="competition-item" onclick="selectCompetition('datascience')">
                <h2>数据科学竞赛</h2>
                <p>分析数据，提出洞察和解决方案。</p>
            </div>
        </div>
    </div>

    <script>
        function selectCompetition(competition) {
            alert('你选择了：' + competition);
            // 可根据选择执行其他操作
        }
    </script>

</body>

</html>